<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>品牌管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
</head>
<body class="hold-transition skin-red sidebar-mini">
  <!-- .box-body -->
                    <div class="box-header with-border">
                        <h3 class="box-title">品牌管理</h3>
                    </div>
                    <div class="box-body">
                        <!-- 数据表格 -->
                        <div class="table-box">
                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal1" ><i class="fa fa-file-o"></i> 新建</button>
                                        <button type="button" class="btn btn-default" title="删除"  onclick="deleteBath()"><i class="fa fa-trash-o"></i> 删除</button>
                                        <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tools pull-right">
                                <div class="has-feedback">
							                                         
                                </div>
                            </div>
                            <!--工具栏/-->
			                  <!--数据列表-->
			                  <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
			                      <thead>
			                          <tr>
			                              <th class="" style="padding-right:0px">
			                                  <input id="selall" type="checkbox" class="icheckbox_square-blue">
			                              </th> 
										  <th class="sorting_asc">品牌ID</th>
									      <th class="sorting">品牌名称</th>									      
									      <th class="sorting">品牌首字母</th>									     				
					                      <th class="text-center">操作</th>
			                          </tr>
			                      </thead>
			                      <tbody id="brandList">
			                      </tbody>
			                  </table>
			                  <!--数据列表/-->
                        </div>
                        <!-- 数据表格 /-->
                     </div>
                    <!-- /.box-body -->
<!-- 增加窗口 -->
<div class="modal fade" id="editModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel1">增加数据</h3>
		</div>
		<div class="modal-body">
			<form id="formAdd">
			<table class="table table-bordered table-striped"  width="800px">
		      	<tr>
		      		<td>品牌名称</td>
		      		<td><input  class="form-control" placeholder="品牌名称" name="name" >  </td>
		      	</tr>		      	
		      	<tr>
		      		<td>首字母</td>
		      		<td><input  class="form-control" placeholder="首字母" name="firstChar">  </td>
		      	</tr>		      	
			 </table>
			</form>
		</div>
		<div class="modal-footer">
			<input type="button" class="btn btn-success" data-dismiss="modal" aria-hidden="true"   onclick="addAll()"  value="保存">
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>
  <!-- 修改窗口-->
  <form id="updateForm">
<div class="modal fade" id="editModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel2">数据修改</h3>
		</div>
		<div class="modal-body">
			<table class="table table-bordered table-striped"  width="800px" id="backContent">
				<!--		回显内容		-->
			</table>
		</div>
		<div class="modal-footer">
			<button class="btn btn-success" data-dismiss="modal" aria-hidden="true"  onclick="toupdate()" >修改</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>
	  </form>
		<script>
			$(function () {
				findBrand();
			})
			function findBrand() {
				$.ajax({
					url:"/brand/findAll",
					type:"post",
					dataType:"json",
					async:false,
					data:{},
					success:function (result) {
						var result =result.result;
						var r = "";
						r +="<thory>"
						for (var i=0;i<result.length;i++){
							r += '<tr>';
							r += '<td><input type="checkbox"  name="brand" id="check" value="'+result[i].id +'"></td>';
							r += '<td>' + result[i].id + '</td>';
							r += '<td>' + result[i].name + '</td>';
							r += '<td>' + result[i].firstChar + '</td>';
							r += '<td class="text-center"><input type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal2" onclick="echo('+ result[i].id +')" value="修改"></td>';
							r += '</tr>';
						}
						r +="</thory>";
						$("#brandList").html(r);
						console.log(result)
					},
					error:function () {
						alert("系统异常")
					}
					})
			}
			//增加
			function addAll() {
				$.ajax({
					url:"/brand/addAll",
					dataType:"json",
					type:"post",
					async:false,
					data:$("#formAdd").serialize(),
					success:function (result) {
						if(result){
							alert("增加成功")
							window.location.reload();
						}
					},
					error:function () {
						alert("系统错误")
					}
				})
			}
			//回显
			function echo(id) {
				$.ajax({
					url:"/brand/echo/" + id,
					dataType:"json",
					type:"get",
					async:false,
					success:function (result){
						var dd = "<input type='hidden' name='id' value='" + result.id + "'><tr>"
						dd += "<td>品牌名称</td>"
						dd += "<td><input class='form-control' placeholder='品牌名称' name='name' value='" + result.name + "'></td>"
						dd += "</tr>"
						dd += "<tr>"
						dd += "<td>首字母</td>"
						dd += "<td><input  class='form-control' placeholder='首字母' name='firstChar' value='" + result.firstChar + "'></td>"
						dd += "</tr>";
						$("#backContent").html(dd)
					},
					error:function (){
						alert("系统错误!")
					}
				})
			}
			//修改
			function toupdate(){
				$.ajax({
					url:"/brand/toupdate",
					dataType:"json",
					type:"post",
					async:false,
					data:$("#updateForm").serialize(),
					success:function (result) {
						if(result){
							alert("修改成功")
							window.location.reload();
						}
					},
					error:function () {
						alert("系统错误")
					}
				})
			}
			//删除
			function deleteBath() {
				alert("22222")
				// var id = $("#check").val();
				var allBrand = document.getElementsByName("brand")
				var checked = []
				for(i in allBrand){
					if(allBrand[i].checked){
						checked.push(allBrand[i].value)
					}
				}
				if(checked.length <= 0){
					alert("请选择品牌!");
					return
				}
				console.log(checked)
				$.ajax({
					url:"/brand/deleteBatch",
					traditional: true,
					data:{"ids" : checked},
					dataType:"json",
					type:"get",
					async:false,
					success:function (result){
						var msg = result.message
						window.location.reload()
						alert(msg)
					},
					error:function (){
						alert("系统错误!")
					}
				})
			}
		</script>
</body>
</html>